import {Layout} from '../../src/Layout';
export default Layout;

import {Card, CardPreview, Content, Text} from '@react-spectrum/s2';
import {ComponentCardView} from '../../src/ComponentCardView';

export const section = 'Overview';
export const title = 'Home';
export const description = 'A React implementation of Spectrum, Adobe\'s design system.';
export const omitFromNav = true;
export const hideFromSearch = true;

# React Spectrum

<PageDescription>A React implementation of Spectrum, Adobe's design system.</PageDescription>

[Getting started](getting-started) • [GitHub](https://github.com/adobe/react-spectrum)

<ComponentCardView items={[
  {id: 'Getting Started', name: 'Getting Started', href: 'getting-started', description: 'Get started with React Spectrum S2.'},
  {id: 'Styling', name: 'Styling', href: 'styling', description: 'Learn how to style React Spectrum components.'},
  {id: 'Migrating', name: 'Migrating', href: 'migrating', description: 'Learn how to migrate from React Spectrum v3 to S2.'},
  {id: 'Accordion', name: 'Accordion', href: 'Accordion', description: 'An accordion is a grouping of related disclosures.'},
  {id: 'ActionBar', name: 'ActionBar', href: 'ActionBar', description: 'Used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.'},
  {id: 'ActionButton', name: 'ActionButton', href: 'ActionButton', description: 'An action button allows a user to perform an action.'},
  {id: 'ActionButtonGroup', name: 'ActionButtonGroup', href: 'ActionButtonGroup', description: 'A grouping of related ActionButtons.'},
  {id: 'ActionMenu', name: 'ActionMenu', href: 'ActionMenu', description: 'Combines an ActionButton with a Menu for simple "more actions" use cases.'},
  {id: 'Avatar', name: 'Avatar', href: 'Avatar', description: 'A thumbnail representation of an entity, such as a user or an organization.'},
  {id: 'AvatarGroup', name: 'AvatarGroup', href: 'AvatarGroup', description: 'A grouping of avatars that are related to each other.'},
  {id: 'Badge', name: 'Badge', href: 'Badge', description: 'A badge displays color-categorized metadata for an object.'},
  {id: 'Breadcrumbs', name: 'Breadcrumbs', href: 'Breadcrumbs', description: 'Breadcrumbs display a hierarchy of links to the current page or resource.'},
  {id: 'Button', name: 'Button', href: 'Button', description: 'A button allows a user to perform an action or to navigate to another page.'},
  {id: 'ButtonGroup', name: 'ButtonGroup', href: 'ButtonGroup', description: 'A button group is a grouping of buttons whose actions are related to each other.'},
  {id: 'Calendar', name: 'Calendar', href: 'Calendar', description: 'A calendar allows a user to select a single date from a date grid.'},
  {id: 'Card', name: 'Card', href: 'Card', description: 'Summarizes an object that a user can select or navigate to.'},
  {id: 'CardView', name: 'CardView', href: 'CardView', description: 'Displays a group of related objects, with support for selection and bulk actions.'},
  {id: 'Checkbox', name: 'Checkbox', href: 'Checkbox', description: 'A checkbox allows a user to select an individual option.'},
  {id: 'CheckboxGroup', name: 'CheckboxGroup', href: 'CheckboxGroup', description: 'A checkbox group allows a user to select one or more items in a list of options.'},
  {id: 'ColorArea', name: 'ColorArea', href: 'ColorArea', description: 'A color area allows users to adjust two channels of a color value.'},
  {id: 'ColorField', name: 'ColorField', href: 'ColorField', description: 'A color field allows users to edit a hex color or individual color channel value.'},
  {id: 'ColorSlider', name: 'ColorSlider', href: 'ColorSlider', description: 'A color slider allows users to adjust an individual channel of a color value.'},
  {id: 'ColorSwatch', name: 'ColorSwatch', href: 'ColorSwatch', description: 'A color swatch displays a preview of a selected color.'},
  {id: 'ColorSwatchPicker', name: 'ColorSwatchPicker', href: 'ColorSwatchPicker', description: 'A color swatch picker displays a list of color swatches and allows a user to select one of them.'},
  {id: 'ColorWheel', name: 'ColorWheel', href: 'ColorWheel', description: 'A color wheel allows users to adjust the hue of a color value on a circular track.'},
  {id: 'ComboBox', name: 'ComboBox', href: 'ComboBox', description: 'A combobox combines a text input with a listbox, and allows a user to filter a list of options.'},
  {id: 'ContextualHelp', name: 'ContextualHelp', href: 'ContextualHelp', description: 'Contextual help shows extra information about an adjacent component.'},
  {id: 'DateField', name: 'DateField', href: 'DateField', description: 'A date field allows a user to enter and edit date values using a keyboard.'},
  {id: 'DatePicker', name: 'DatePicker', href: 'DatePicker', description: 'A date picker combines a DateField and a Calendar popover.'},
  {id: 'DateRangePicker', name: 'DateRangePicker', href: 'DateRangePicker', description: 'A date range picker combines two DateFields and a RangeCalendar popover.'},
  {id: 'Dialog', name: 'Dialog', href: 'Dialog', description: 'A dialog is an overlay shown above other content in an application.'},
  {id: 'Disclosure', name: 'Disclosure', href: 'Disclosure', description: 'A disclosure is a collapsible section of content.'},
  {id: 'Divider', name: 'Divider', href: 'Divider', description: 'Brings clarity to a layout by grouping and dividing content in close proximity.'},
  {id: 'DropZone', name: 'DropZone', href: 'DropZone', description: 'A drop zone is an area into which one or multiple objects can be dragged and dropped.'},
  {id: 'Form', name: 'Form', href: 'Form', description: 'A form provides layout and alignment for a grouping of fields.'},
  {id: 'Icons', name: 'Icons', href: 'icons', description: 'A collection of workflow icons that can be imported from @react-spectrum/s2/icons.'},
  {id: 'IllustratedMessage', name: 'IllustratedMessage', href: 'IllustratedMessage', description: 'Displays an illustration and a message, usually for an empty state or an error page.'},
  {id: 'Illustrations', name: 'Illustrations', href: 'illustrations', description: 'A collection of illustrations that can be imported from @react-spectrum/s2/illustrations.'},
  {id: 'Image', name: 'Image', href: 'Image', description: 'An image with support for skeleton loading and custom error states.'},
  {id: 'InlineAlert', name: 'InlineAlert', href: 'InlineAlert', description: 'Displays a non-modal message associated with objects in a view.'},
  {id: 'Link', name: 'Link', href: 'Link', description: 'A link allows a user to navigate to another page.'},
  {id: 'LinkButton', name: 'LinkButton', href: 'LinkButton', description: 'Combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.'},
  {id: 'Menu', name: 'Menu', href: 'Menu', description: 'A menu displays a list of actions or options that a user can choose.'},
  {id: 'Meter', name: 'Meter', href: 'Meter', description: 'A meter represents a quantity within a known range, or a fractional value.'},
  {id: 'NumberField', name: 'NumberField', href: 'NumberField', description: 'A number field allows a user to enter, increment, or decrement a numeric value.'},
  {id: 'Picker', name: 'Picker', href: 'Picker', description: 'A picker displays a collapsible list of options, and allows a user to select one of them.'},
  {id: 'Popover', name: 'Popover', href: 'Popover', description: 'A popover displays interactive content in context with a trigger element.'},
  {id: 'ProgressBar', name: 'ProgressBar', href: 'ProgressBar', description: 'A progress bar shows progress of an operation over time with a linear representation.'},
  {id: 'ProgressCircle', name: 'ProgressCircle', href: 'ProgressCircle', description: 'A progress circle shows progress of an operation over time with a circular representation.'},
  {id: 'RadioGroup', name: 'RadioGroup', href: 'RadioGroup', description: 'A radio group allows a user to select a single item from a list of options.'},
  {id: 'RangeCalendar', name: 'RangeCalendar', href: 'RangeCalendar', description: 'A range calendar allows a user to select a contiguous range of dates.'},
  {id: 'RangeSlider', name: 'RangeSlider', href: 'RangeSlider', description: 'A range slider allows a user to select a range of values within a larger range.'},
  {id: 'SearchField', name: 'SearchField', href: 'SearchField', description: 'A search field allows a user to enter and clear a search query.'},
  {id: 'SegmentedControl', name: 'SegmentedControl', href: 'SegmentedControl', description: 'A mutually exclusive group of buttons used for view switching.'},
  {id: 'SelectBoxGroup', name: 'SelectBoxGroup', href: 'SelectBoxGroup', description: 'Allows users to select one or more options from a list.'},
  {id: 'Skeleton', name: 'Skeleton', href: 'Skeleton', description: 'Wraps around content to render it as a placeholder.'},
  {id: 'Slider', name: 'Slider', href: 'Slider', description: 'A slider allows a user to select a numeric value within a range.'},
  {id: 'StatusLight', name: 'StatusLight', href: 'StatusLight', description: 'A status light displays the status or category of an entity.'},
  {id: 'Switch', name: 'Switch', href: 'Switch', description: 'A switch allows a user to turn a setting on or off.'},
  {id: 'TableView', name: 'TableView', href: 'TableView', description: 'A table view displays data in rows and columns, with row selection and sorting.'},
  {id: 'Tabs', name: 'Tabs', href: 'Tabs', description: 'Tabs organize content into multiple sections, and allow a user to view one at a time.'},
  {id: 'TagGroup', name: 'TagGroup', href: 'TagGroup', description: 'A tag group displays a list of items, with support for keyboard navigation and removal.'},
  {id: 'TextArea', name: 'TextArea', href: 'TextArea', description: 'A text area allows a user to enter a multi-line text value with a keyboard.'},
  {id: 'TextField', name: 'TextField', href: 'TextField', description: 'A text field allows a user to enter a plain text value with a keyboard.'},
  {id: 'TimeField', name: 'TimeField', href: 'TimeField', description: 'A time field allows a user to enter and edit time values using a keyboard.'},
  {id: 'Toast', name: 'Toast', href: 'Toast', description: 'A toast displays a temporary notification of an action, error, or other event.'},
  {id: 'ToggleButton', name: 'ToggleButton', href: 'ToggleButton', description: 'A toggle button allows a user to toggle between two states.'},
  {id: 'ToggleButtonGroup', name: 'ToggleButtonGroup', href: 'ToggleButtonGroup', description: 'A toggle button group allows a user to toggle multiple options, with single or multiple selection.'},
  {id: 'Tooltip', name: 'Tooltip', href: 'Tooltip', description: 'A tooltip displays a description of an element on hover or focus.'},
  {id: 'TreeView', name: 'TreeView', href: 'TreeView', description: 'A tree view displays hierarchical data with selection and collapsing.'},
  {id: 'Release Notes', name: 'Release Notes', href: 'releases/', description: 'Release notes for React Spectrum.'}
]}/>
